<template>
	<div id='payrollInfo' v-if="personPayInfo" >
    <Row>
      <i-col span="12">
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Pay rate</i-col>
          <i-col span="9" class="value" v-if="personPayInfo.unit&&personPayInfo.payRate&&personPayInfo.payRangeName">
            {{personPayInfo.unit +' ' +personPayInfo.payRate +" / " + personPayInfo.payRangeName}}
          </i-col>
        </Row>
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Pay schedule</i-col>
          <i-col span="9" class="value">{{personPayInfo.payScheduleName?personPayInfo.payScheduleName:""}}</i-col>
        </Row>
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Payment method</i-col>
          <i-col span="9" class="value">{{personPayInfo.payMethod?personPayInfo.payMethod:""}}</i-col>
        </Row>
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Taxes</i-col>
          <i-col span="9" class="value">{{personPayInfo.taxes?personPayInfo.taxes:""}}</i-col>
        </Row>
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Deductions</i-col>
          <i-col span="9" class="value">
            <template v-for="(item,key) in personPayInfo.employeeDeduction">
              <div class="value-item">{{item.deductionName?item.deductionName:""}}</div>
              <div class="value-item">
                {{item.amount + ' ' + item.amountType}}<br>
                {{item.annualMax}} max
              </div>
            </template>
          </i-col>
        </Row>
        <Row class="payroll-info-row">
          <i-col span="9" class="label">Company-paid contributions</i-col>
          <i-col span="9" class="value">
            <template v-for="(item,key) in personPayInfo.companyDeduction">
              <div class="value-item">{{item.deductionName}}</div>
              <div class="value-item">
                {{item.amount + ' ' + item.seperator +' '+ item.amountType}}<br>
              </div>
            </template>
          </i-col>
        </Row>
      </i-col>
      <i-col span="10" offset="2">
        <div class="bill-box">
          <div class="top-condition">
            <Row>
              <i-col span="6">Sample check</i-col>
              <i-col span="18">
                <span class="change_item" v-if="baseType ==0" @click.self="changeBaseType">( Based  on <Input-number size="small" type="number" v-model="hourPay" style="width: 60px" :min="0" :controls="false" @on-change="getExperiencePayRoll"></Input-number> regular hours per pay period )</span>
                <span class="change_item" v-if="baseType ==1" @click.self="changeBaseType">( Based on a commission of $ <Input-number size="small" type="number" v-model="commisionPay" style="width: 60px" @on-change="getExperiencePayRoll"></Input-number> )</span>
              </i-col>
            </Row>
            <p>daydao.inc</p>
            <p>2102 Fairway Drive San Francisco, CA94103</p>
            <p class="pay-name">
              <span>Pay To</span><span class="name">Anne Hathaway</span>
            </p>
          </div>
          <div class="screen-wrapper">
            <div class="screen">$1670.41</div>
          </div>
          <div class="exit-wrapper">
            <div class="exit"></div>
          </div>
          <div class="paper-bill">
            <div class="paper-bottom-circle">
              <span v-for="key in 13" class="circle-item"></span>
            </div>
          </div>
        </div>
      </i-col>
    </Row>
	</div>
</template>

<script>
	export default {
		name: 'id',
		created(){
			this.init();
    },
		data () {
			return {
				title: ' ',
        baseType:0,
        commisionPay:null,
        hourPay:null,
			}
		},
    computed:{
      personPayInfo(){
        return this.$store.getters.oPayInfo;
      },
      isShowRight(){
        if(this.personPayInfo){
          return this.personPayInfo.unit&&this.personPayInfo.payRate&&this.personPayInfo.payRangeName&&this.personPayInfo.payScheduleId&&this.personPayInfo.employerDeduction&&this.personPayInfo.employerDeduction.length;
        }
        return  false;
      },
      experiencePayRoll(){
        return this.$store.getters.experiencePayRoll;
      }
    },
    methods:{
			init(){
				this.id = this.$route.params.id;
				this.getPayInfo();
      },
      getPayInfo(){
        this.$store.dispatch('getPayInfo',{personId:6000000011039366});
      },
      changeBaseType(type){
        if(this.baseType<1){
          this.baseType++;
        }else{
          this.baseType=0
        }
        this.getExperiencePayRoll();
      },
      getExperiencePayRoll:function () {
        this.$store.commit('setCommonStateData',{key:'experiencePayRoll',null});
        var param ={
          personId:parseInt(this.id),
          hour:0,
          commision:0
        }
        if(this.baseType == 0 && this.hourPay){
          this.hourPay = isNaN(parseInt( this.hourPay))? 0.0 :this.hourPay;
          param.hour = this.hourPay;
          this.$store.dispatch('getExperiencePayRoll',param);
        }/*else if(this.baseType == 1){
         this.$store.dispatch('getExperiencePayRoll',param);
         }*/else if(this.baseType == 1 &&this.commisionPay){
          this.commisionPay = isNaN(parseInt( this.commisionPay))? 0.0 :this.commisionPay;
          param.commision = this.commisionPay;
          this.$store.dispatch('getExperiencePayRoll',param);
        }
      },
    }
	}
</script>


<style rel="stylesheet/scss" type="text/css" lang="scss">
	@import "src/assets/css/variable.scss";

	#payrollInfo {
    padding: 50px 61px;
    .payroll-info-row{
      margin-bottom: 43px;
      .label{
       /* font-family: PingFangTC-Regular;*/
        font-size: 14px;
        color: #96ACB9;
        padding-left: 30px;
        &:before{
          content: "";
          display: inline-block;
          position: absolute;
          left: 0;
          top:8px;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: $baseColor;
        }
      }
      .value{
        /*font-family: PingFangTC-Regular;*/
        font-size: 14px;
        color: #325570;
        .value-item{
          margin-bottom: 25px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
    }

    .bill-box{
      position: relative;
      box-sizing: border-box;
      width: 392px;
      height: 292px;
      padding: 18px;
      background: #F8F8F8;
      box-shadow: 7px 7px 6px 0 rgba(83,87,126,0.46), inset 0 -3px 11px 0 rgba(168,168,137,0.47);
      border-radius: 6px;
      .top-condition{
        height: 140px;
        background: #FFFFFF;
        box-shadow: inset 0 1px 3px 0 #B5B5B5;
        border-radius: 6px;
        margin-bottom: 17px;
        padding: 9px;
        font-size: 12px;
        line-height: 26px;
        .change_item{
          color: #96ACB9;
        }
        .pay-name{
          font-size: 12px;
          color: #96ACB9;
          .name{
            margin-left: 19px;
            font-size: 16px;
            color: #325570;
          }
        }
      }
      .screen-wrapper{
        height: 68px;
        background: #FCFCFC;
        box-shadow: 1px 1px 1px 0 #FFFFFF, inset 0 2px 3px 0 rgba(135,133,133,0.50);
        border-radius: 6px;
        padding: 11px 17px;
        .screen{
          height: 47px;
          line-height: 47px;
          background: rgba(235,245,241,0.73);
          box-shadow: 0 1px 1px 0 #FFFFFF, inset 0 2px 4px 0 #557A6F;
          border-radius: 6px;
          font-size: 24px;
          color: #325570;
          text-align: center;
        }
      }
      .exit-wrapper{
        height: 28px;
        background: rgba(225,225,214,0.51);
        border-radius: 100px;
        padding: 4px 2px;
        .exit{
          height: 20px;
          background: #000000;
          box-shadow: inset 0 -1px 2px 0 #FFFFFF;
          border-radius: 100px;
        }
      }
      .paper-bill{
        position: relative;
        top:-16px;
        width: 320px;
        margin: 0 auto;
        background: #FFFFFF;
        box-shadow: 0 5px 22px 0 rgba(132, 135, 163, 0.55);
        z-index:10;
        transition: all .5s;
        min-height: 80px;
        height: 80px;
        &:before{
          content: "";
          display: block;
          height: 20px;
          background-image: linear-gradient(-180deg, #35352E 0%, rgba(255,255,255,0.00) 80%);
        }
        .paper-bottom-circle{
          position: absolute;
          left: 0;
          bottom: -8px;
          height: 8px;
          width: 100%;
          overflow: hidden;
          background-color: #fff;
          z-index:1000;
          .circle-item{
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-left: 11.5px;
            background-image: linear-gradient(-180deg, #c0c0b4 0%, rgba(255,255,255,0.00) 80%);
            &:first-child{
              margin-left:0 ;
            }
          }
        }
      }
    }
	}
</style>
